<template>
  <div style="">
    <div class="monitor-container">
      <video
        id="myPlayer"
        height="100%"
        width="100%"

        autoplay="true"
        :src="plcVideoSrc"
        controls
        playsInline
        webkit-playsinline
      />
    </div>

    <!--  <button @click="aaa">test</button>-->
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  import ezuikit from "../../../static/ezuikit/ezuikit.js"
  export default {
    name: "index",
    data() {
      return {
        player: null
      };
    },
    methods: {
    },
    computed: {
      ...mapGetters(['plcVideoSrc'])
    },
    watch: {
      plcVideoSrc(vv) {
        let parent = this;
        if (this.player) this.player.stop();
        if (vv) {
          setTimeout(function () {
            parent.player = new ezuikit.EZUIPlayer('myPlayer');
            console.log(parent.player)
          }, 1000);
        }
      }
    },
    beforeDestroy() {
      this.player.stop();
      this.$store.dispatch('plc/setVideoSrc', '');
    },
  }
</script>

<style lang="scss" scoped>
  .monitor-container {
    //改变颜色
    background-color: #5414d3;
    border-radius: 5px;
    width: 100%;

  }
</style>
